<template>
  <div>
    <div class="search">

      <p> 名称</p>
      <el-input v-model="keyword" placeholder="请输入关键字" @keydown.enter.native="renderPermissionList"></el-input>

      <el-button type="primary" @click="renderPermissionList" size="small">搜索</el-button>
      <el-button type="primary" @click="handleAdd" size="small">新增</el-button>

    </div>

    <el-table :data="tableData" border class="table" :height="getHeight()" style="margin-left: 20px; width: 95% ">
      <el-table-column type="index" label="序号" width="50" align="center" fixed>
      </el-table-column>

      <el-table-column prop="id" label="ID" width="100" align="center">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="200" align="center">
      </el-table-column>
      <el-table-column prop="path" label="权限"  align="center">
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="200" align="center">
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间" width="200" align="center">
      </el-table-column>

      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template slot-scope="scope">

          <el-button type="primary" icon="el-icon-edit" circle size="small" @click="editRow(scope.row)"></el-button>
          <el-button @click.native.prevent="deleteRow(scope.row)" type="danger" icon="el-icon-delete" circle size="small"
            class="delbtn"> </el-button>

        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row class="footer" style="margin: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next,jumper" :total="count">
      </el-pagination>
    </el-row>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="form = {};">
      <el-form :model="form" label-width='50px' :rules="rules" ref="ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="path">
          <el-input v-model="form.path"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false; onSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import { getPermissionList, addPermission, delPermission, editPermission } from '@/api/role'
export default {
  name: 'roleManagement',
  data() {
    return {
      keyword: "",
      tableData: [],
      page: 1,
      limit: 20,
      count: 0,
      dialogFormVisible: false,
      form: {},
      title: '添加权限',
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }, 
        ],
        path: [
          { required: true, message: '请输入角色描述', trigger: 'blur' },

        ],
      },

    }
  },
  created() {
    this.renderPermissionList()
  },

  methods: {
    renderPermissionList() {
      getPermissionList({ keyword: this.keyword, page: this.page, limit: this.limit }).then(res => {
        if (res.code == 1) {
          console.log(res)
          this.tableData = res.data.list
          this.count = res.data.count
        }
      })
    },

    handleAdd() {
      this.dialogFormVisible = true
      this.title = '添加权限'
    },
    editRow(row) {
      this.dialogFormVisible = true
      this.title = '编辑权限'
      this.form = { ...row }
    },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.title == '添加权限') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },

    add() {

      addPermission(this.form).then(res => {
        if (res.code == 1) {
          this.$message.success('添加权限成功')
          this.renderPermissionList()
        }
      })
    },

    edit() {
      editPermission(this.form).then(res => {
        if (res.code == 1) {
          this.$message.success('权限编辑成功')
          this.renderPermissionList()
        }
      })
    },

    deleteRow(row) {
      delPermission(row).then(res => {
        if (res.code == 1) {
          this.$message.success('删除成功')
          this.renderPermissionList()
        }
      })
    },
    handleSizeChange(val) {
      this.limit = val
      this.renderPermissionList()
    },
    //改变当前页
    handleCurrentChange(val) {
      this.page = val
      this.renderPermissionList()
    },
    //获取表格高度
    getHeight() {
      return window.innerHeight - 255
    },
  },


}

</script>  
  
<style  scoped>
.search {
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  align-items: center;
}

.search p {
  width: 80px;
}

.search .el-input {
  width: 200px;
  margin-right: 20px;
}
</style>
  